<template>
  <div class="card" :style="{ 'font-size': fontSize + 'px' }">
    <echarts-view ref="echarts" :options="option" height="100%"></echarts-view>
    <div class="button-group">
      <!-- <a-button type="primary" block>贵安新区</a-button> -->
      <a-button type="primary" block @click="handleChooseArea('经开区')">经开区</a-button>
      <a-button type="primary" block @click="handleChooseArea('双龙区')">双龙区</a-button>
      <!-- <a-button type="primary" block @click="handleChooseArea('综保区')">综保区</a-button> -->
      <a-button type="primary" block @click="handleChooseArea('高新区')">高新区</a-button>
    </div>
    <y-button
      type="primary"
      style="position: absolute; right: 0; bottom: 10px; background: transparent"
      v-if="isArea"
      @click="handleBack"
      >返回</y-button
    >
  </div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader'
import VueCountUp from 'vue-countupjs'
import headerTitle from './headerTitle.vue'
import { echartsView } from '@/components'
import * as echarts from 'echarts'
import { setFontSize } from '@/utils/util'
export default {
  components: {
    headerTitle,
    echartsView,
    VueCountUp,
  },
  data() {
    return {
      option: {},
      isArea: false,
      tjzl: {
        FWZCTS: '0',
        FWZCTS_HBZZ: 0,
        GDZCTS: '0',
        GDZCTS_HBZZ: 0,
        ZCZTS: '0',
        ZCZTS_HBZZ: 0,
      },
      area: [
        { name: '南明区', value: 2 },
        { name: '云岩区', value: 3 },
        { name: '观山湖区', value: 8 },
        { name: '乌当区', value: 9 },
        { name: '花溪区', value: 10 },
        { name: '白云区', value: 11 },
        { name: '高新区', value: 12 },
        { name: '经开区', value: 13 },
        { name: '双龙区', value: 172 },
      ],
      fontSize: 16,
    }
  },
  mounted() {
    this.init()
    window.addEventListener('resize', this.screenAdatper)
  },
  methods: {
    init() {
      AMapLoader.load({
        key: 'f0bfbfac6d986ff63a4fc40e21c3412d', // 申请好的Web端开发者Key，首次调用 load 时必填
        version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        AMapUI: {
          version: '1.1',
          plugins: ['geo/DistrictExplorer'],
        },
      }).then((AMap) => {
        // eslint-disable-next-line no-undef
        const districtExplorer = new AMapUI.DistrictExplorer()
        // 获取行政区域
        const getGeoJson = (adcode) => {
          return new Promise((resolve, reject) => {
            districtExplorer.loadAreaNode(adcode, function (error, areaNode) {
              if (error) {
                reject(error)
                return
              }
              let Json = areaNode.getSubFeatures()
              const mapJson = {
                type: 'FeatureCollection',
                features: [],
              }
              if (Json.length === 0) {
                Json = drawMap.getJson.features.filter((item) => item.properties.adcode === adcode)
              }
              mapJson.features = Json
              resolve(mapJson)
            })
          })
        }
        // 获取数据
        const getChartData = (val) => {
          let data = []
          getGeoJson(val).then((res) => {
            data = res.features.map((e) => {
              return {
                adcode: e.properties.adcode,
                name: e.properties.name,
                value: (Math.random() * 100).toFixed(2),
              }
            })
            drawMap(res, data)
          })
        }
        // 挂载 方便外部调用
        this.init.getChartData = getChartData

        const drawMap = (map, data) => {
          drawMap.getJson = map
          echarts.registerMap('zyxh', map)
          this.option = {
            tooltip: {
              show: false,
              trigger: 'item',
              backgroundColor: 'rgba(255,255,255,0)',
              borderWidth: 0,
              enterable: true,
              padding: 0,
            },
            geo: {
              center: undefined,
              zoom: 1,
              layoutCenter: ['50%', '50%'],
              layoutSize: '96%',
              map: 'zyxh',
              show: true,
              animationDurationUpdate: 0,
              label: {
                emphasis: {
                  show: false,
                },
              },
              itemStyle: {
                normal: {
                  areaColor: '#091632',
                  borderColor: '#1773c3',
                  shadowColor: '#1773c3',
                  shadowBlur: 20,
                },
              },
            },
            series: [
              {
                center: undefined,
                zoom: 1,
                animationDurationUpdate: 0,
                roam: 'scale',
                layoutCenter: ['50%', '50%'],
                layoutSize: '96%',
                geoIndex: 1,
                name: '贵阳市',
                type: 'map',
                map: 'zyxh',
                label: {
                  show: true,
                  color: 'white',
                  fontSize: 10,
                },
                itemStyle: {
                  normal: {
                    borderWidth: 2, // 边际线大小
                    borderColor: '#2576b4', // 边界线颜色
                    areaColor: '#113f7d', // 默认区域颜色
                  },
                  emphasis: {
                    show: true,
                    areaColor: '#3066ba', // 鼠标滑过区域颜色
                    label: {
                      show: true,
                      textStyle: {
                        color: '#fff',
                      },
                    },
                  },
                },
                data,
              },
              {
                type: 'effectScatter',
                coordinateSystem: 'geo',
                showEffectOn: 'render',
                zlevel: 1,
                // roam: true,
                rippleEffect: {
                  period: 15,
                  scale: 4,
                  brushType: 'fill',
                },
                hoverAnimation: true,
                tooltip: {
                  show: false,
                },
                label: {
                  normal: {
                    position: 'top',
                    offset: [15, 0],
                    color: '#1DE9B6',
                    show: true,
                    formatter: '{b}',
                  },
                },
                itemStyle: {
                  normal: {
                    color: '#1DE9B6',
                    shadowBlur: 20,
                    shadowColor: '#333',
                  },
                },
                symbolSize: 12,
                data: [],
              },
            ],
          }
        }
        getChartData(520100)
        this.$refs.echarts.chart.on('click', (params) => {
          const {
            data: { name, adcode },
            componentSubType,
            seriesType,
          } = params
          const areaArr = this.area
          let isTrue = false
          areaArr.forEach((item) => {
            if (item.name === name) {
              isTrue = true
              this.updateArea(item.value)
            }
          })
          if (!isTrue) {
            this.$message.warning('很抱歉，暂时没有数据哦！')
          } else {
            if (componentSubType === 'map' && seriesType === 'map' && !this.isArea) {
              this.isArea = true
              getChartData(adcode)
            }
          }
        })
        this.$refs.echarts.chart.on('georoam', (params) => {
          const option = this.$refs.echarts.chart.getOption()
          if (params.zoom !== null && params.zoom !== undefined) {
            // 捕捉到缩放时
            option.geo[0].zoom = option.series[0].zoom // 下层geo的缩放等级跟着上层的geo一起改变
            option.geo[0].center = option.series[0].center // 下层的geo的中心位置随着上层geo一起改
          } else {
            // 捕捉到拖曳时
            option.geo[0].center = option.series[0].center // 下层的geo的中心位置随着上层geo一起改变
          }
          this.option = option
        })
      })
    },
    updateArea(id) {
      this.$emit('updateAreaID', id)
    },
    handleChooseArea(title) {
      // this.isArea = true
      let isTrue = false
      this.area.forEach((item) => {
        if (item.name === title) {
          this.updateArea(item.value)
          this.init.getChartData(520100)
          isTrue = true
        }
      })
      if (!isTrue) {
        this.$message.warning('很抱歉，暂时没有数据哦！')
      }
    },
    screenAdatper() {
      this.$refs.echarts && this.$refs.echarts.chart.resize()
      this.option.fontSize = setFontSize(24)
      this.$refs.echarts.setOptions(this.option)
      this.fontSize = setFontSize(24)
    },
    beforeDestoryed() {
      window.removeEventListener('resize')
    },
    handleBack() {
      this.init.getChartData(520100)
      this.$emit('updateAreaID', 0)
      this.isArea = false
    },
  },
}
</script>
<style lang="less" scoped>
.card {
  height: 100%;
  position: relative;
}
.button-group {
  position: absolute;
  right: 10px;
  bottom: 100px;
  width: 100px;
  .ant-btn {
    background-color: transparent;
    border-color: #1890ff;
    margin-bottom: 10px;
  }
}
</style>
